<template>
    <div id="app">
        <t-loading :loading="loading" size="medium" show-overlay>
            <t-base-table stripe bordered row-key="id" :data="User" :columns="columns" :max-height="'70vh'"
                :pagination="{ total: User.length }">
                <template #userImg="{ col, row }">
                    <img style="border-radius:5px;" width="100" height="100" :src="row.avatarUrl" alt="">
                </template>
                <template #btn="{ col, row }">
                    <t-button>积分明细</t-button>
                </template>
            </t-base-table>
        </t-loading>
    </div>
</template>

<script setup>
import { getUserData } from '@/http/modules/user'
import { ref } from '@vue/reactivity'
const User = ref([]);
const loading = ref(true)
const columns = [
    {
        width: '100',
        colKey: 'id',
        title: '序号',
        // 对齐方式
        align: 'center',
        // 设置列类名
        className: 'custom-column-class-name',
        // 设置列属性
        attrs: {
            'data-id': 'first-column',
        },
    },
    {
        colKey: 'nikename',
        title: '用户名',
    },
    {
        colKey: 'avatarUrl',
        title: '头像',
        cell: 'userImg',
    },
    {
        colKey: 'sumIntegral',
        title: '累计积分',
    },
    {
        colKey: 'nowIntegral',
        title: '实时积分',
    },
    {
        colKey: 'nowIntegral',
        title: '操作',
        cell: "btn"
    }
];
getUserData().then(res => {
    User.value = res;
    loading.value = false
})
</script>
 
<style lang="less" scoped>

</style>